<template>
	<view>
		<u-popup :show="isShow" :round="10" mode="center" @open="open">
			<view class="pwd-popup">
				<view>
					<u-icon name="close" size="24" @click.native.stop="close"></u-icon>
				</view>
				<view class="flex justify-center margin-top-sm margin-bottom-lg">
					<image src="../../static/my/pwd-icon.png" mode="widthFix" class="pwd-icon"></image>
				</view>
				<view class="text-bold font-18 text-black0">请输入支付密码</view>
				<view class="padding text-black9">输入您的支付密码进行验证</view>
				<view class="margin-tb-lg">
					<u-code-input v-model="pwd" :maxlength="6" focus :dot="isCiphertext" @finish="finish"></u-code-input>
				</view>
				<view class="margin-bottom-xl flex justify-center align-center" @click="showPwd">
					<view class="text-black9">{{isCiphertext ? '显示密码' : '隐藏密码'}}</view>
					<image :src="isCiphertext ? '../../static/my/eye-hide.png' : '../../static/my/eye-show.png'" mode="widthFix" class="eye"></image>
				</view>
			</view>
		</u-popup>

        <setPayPassword ref="setPayPasswordRef" @change="change" ></setPayPassword>
	</view>
</template>

<script>
	import setPayPassword from "@/components/payPassword/setPayPassword.vue";

    export default {
		name: "payPassward",
        components: {setPayPassword},
		data() {
			return {
				pwd: '',
                isShow: false,
                show: false,
				isCiphertext: true
			};
		},
        watch: {
            show(val){
                if(val){
                    if(!this.$store.state?.user?.userInfo?.payCipherFlag){
                        this.$refs.setPayPasswordRef.show = true
                    }else {
                        this.isShow = true
                    }
                }else {
                    this.isShow = false
                }
            }
        },
		methods: {

            change(){
              this.isShow = true
            },

			open() {
				this.pwd = ''
				this.isCiphertext = true
			},
			showPwd() {
				this.isCiphertext = !this.isCiphertext
			},
			close() {
                this.pwd = ''
                this.isShow = false
                this.show = false
				this.$emit('close')
			},
			finish() {
				this.$emit('pay', {
                    password: this.pwd
                })
                this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
.pwd-popup {
	border-radius: 40rpx;
	padding: 40rpx;
	text-align: center;

	.pwd-icon {
		width: 160rpx;
		height: 160rpx;
	}

	.eye {
		width: 34rpx;
		height: 20rpx;
		margin-left: 12rpx;
	}
}

::v-deep .u-code-input__item {
	width: 72rpx !important;
	height: 92rpx !important;
	//border: 2rpx solid #A16A05 !important;
	//color: #A16A05 !important;
	margin-right: 24rpx !important;
	position: relative !important;
	border-radius: 10rpx !important;

	text {
		font-size: 60rpx !important;
		//color: #A16A05 !important;
	}
}
::v-deep .u-code-input__item__dot{
	background-color: transparent !important;
	width: 100% !important;
	height: fit-content !important;
}
::v-deep .u-code-input__item__dot::after{
	content: '*';
	font-size: 62rpx;
}
</style>
